<template>
  <div class="myCareDoctor">
    <div
        class="MyDoctorInforList"
        v-for="item in MyDoctorInforList"
        :key="item.id">
      <div class="doclist">
        <div class="row1">
          <van-image
              class="doctorImg"
              round
              width="3rem"
              height="3rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
              @click="ChaKanDoctor(item)"
          />
          <div>
            <div style="margin-top: 0.5rem">
              <span>{{ item.name ? item.name : '李小爱' }}</span>
            </div>
            <div style="margin-top: 0.5rem">
              <span>{{ item.job ? item.job : '主治医师' }}</span>
            </div>
          </div>
        </div>
        <div class="row2">
          <div>
            <span>从医经验：{{ item.experience ? item.experience : '从业15年' }}</span>
          </div>
          <van-button type="info" size="small" @click="cancelCareDoctorBtn(item.did)">取消关注</van-button>
        </div>
        <div class="row3">
          <span>所属医院：</span>
          <span>{{ item.hname ? item.hname : '成都市癫痫医院' }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {Toast} from "vant";

export default {
  name: "myCareDoctor",
  computed: {
    ...mapGetters(['loginUserInfo', 'userPhone'])
  },
  data() {
    return {
      //我的关注的医生列表
      MyDoctorInforList: '',
    }
  },
  mounted() {
    this.getMyDoctorList();
  },
  methods: {
    //查看医生--进入医生详情
    ChaKanDoctor(item) {
      this.$router.push({path: "/ChaKanDoctor", query: {item}});
      console.log(item);
    },
    //取消关注医生
    cancelCareDoctorBtn(did) {
      this.$service.myService.cancelCareDoctor(did, this.userPhone).then(res => {
        if (res.data.code == 200) {
          Toast.success('已取消关注');
          this.getMyDoctorList();
        } else {
          Toast.fail('操作失败');
        }
      })
    },
    //获取我关注的医生的列表
    getMyDoctorList() {
      this.$service.myService.myCareDoctorList(this.userPhone).then(res => {
        this.MyDoctorInforList = res.data.data;
      })
    },
  }
}
</script>

<style scoped lang="less">
.doclist {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  font-size: 14px;

  .row1 {
    display: flex;

    .doctorImg {
      margin-right: 0.5rem;
    }
  }

  .row2 {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
}
</style>
